<template>
  <div>
    <el-row>
      <el-col :span="18">
        <el-tag>客户资料ID：{{id}}</el-tag>
        <hr/>
        <el-form ref="form" :disabled="disabled" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="客户姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入客户姓名"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职业" prop="occupation">
                <el-select v-model="form.occupation" placeholder="请输入职业">
                  <el-option v-for="item in dict.type.occupation" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="学历" prop="education">
                <el-select v-model="form.education" placeholder="请输入学历">
                  <el-option v-for="item in dict.type.education" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在地区" prop="area">
                <el-cascader
                  v-model="form.area"
                  :options="provinceAndCityDataOptions"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="微信号" prop="weixin">
                <el-input v-model="form.weixin" placeholder="请输入微信号"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age" placeholder="请输入年龄" type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业" prop="major">
                <el-select v-model="form.major" placeholder="请输入专业">
                  <el-option v-for="item in dict.type.major" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="在职情况" prop="job">
                <el-select v-model="form.job" placeholder="请输入在职情况">
                  <el-option v-for="item in dict.type.job" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="当前薪资" prop="salary">
                <el-select v-model="form.salary" placeholder="请输入当前薪资">
                  <el-option v-for="item in dict.type.salary" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="qq" prop="qq">
                <el-input v-model="form.qq" placeholder="请输入qq"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请输入性别">
                  <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="目标薪资" prop="expectedSalary">
                <el-select v-model="form.expectedSalary" placeholder="请输入目标薪资">
                  <el-option v-for="item in dict.type.salary" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-tag>客户意向</el-tag>
          <hr/>
          <el-row>
            <el-col :span="8">
              <el-form-item label="意向学科" prop="subject">
                <el-select v-model="form.subject" placeholder="请输入意向学科" clearable @change="handleChangeSubject">
                  <el-option v-for="item in dict.type.course_subject" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="意向课程" prop="courseId">
                <el-select v-model="form.courseId" placeholder="请输入意向课程" clearable>
                  <el-option v-for="item in courseOptions" :label="item.name" :value="item.id"
                             :key="item.id"
                             @click.native="hangelCoures(item)"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="意向金额" prop="price">
                <el-input placeholder="请输入意向金额" v-model="form.price"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="学习原因" prop="reasons">
                <el-input v-model="form.reasons" placeholder="请输入学习原因"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职业计划" prop="plan">
                <el-input v-model="form.plan" placeholder="请输入职业计划"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="时间计划" prop="planTime">
                <el-date-picker clearable
                                v-model="form.planTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请输入时间计划">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="其他意向" prop="otherIntention">
                <el-input v-model="form.otherIntention" placeholder="请输入其他意向"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-tag>添加沟通记录</el-tag>
          <hr/>
          <el-row>
            <el-col :span="12">
              <el-form-item label="跟进状态" prop="trackStatus">
                <el-select v-model="form.trackStatus" placeholder="请输入跟进状态">
                  <el-option v-for="item in dict.type.track_status" :label="item.label" :value="item.value"
                             :key="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下次跟进时间" prop="nextTime">
                <el-date-picker clearable
                                v-model="form.nextTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择下次跟进时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="沟通重点" prop="communicationPoints">
                <el-select multiple placeholder="请输入沟通重点" v-model="form.communicationPoints">
                  <el-option v-for="item in dict.type.communication_point" :label="item.label" :value="item.label"
                             :key="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="沟通纪要" prop="record">
                <el-input show-word-limit v-model="form.record" type="textarea" placeholder="请输入沟通纪要"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!--                <el-input v-model="form.record" type="textarea" placeholder="请输入跟进记录"/>-->
          <hr/>
        </el-form>
        <el-row>
          <el-col :offset="11" :span="14">
            <el-button v-if="(business.status == 1 || business.status == 2) && !disabled" type="primary"
                       icon="el-icon-check" @click="submitForm">保存
            </el-button>
            <el-button @click="handleGiveBack" type="danger">踢回公海</el-button>
            <el-button @click="handleTransForm" type="success">转交成客户</el-button>
            <el-button icon="el-icon-close" @click="$emit('cancel')">取消</el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <track-list :id="id" :key="trackListKey"></track-list>
      </el-col>
    </el-row>
    <!--    踢回公海-->
    <give-back ref="giveBack"
               :businessId="businessId" @success="ok"
    ></give-back>
    <!--    转合同-->
    <transform ref="transform"
               :businessId="businessId"
               @success="ok"
    ></transform>
  </div>
</template>

<script>
  import {getBusiness} from "../../../../api/crm/business";
  import {listRecord} from "@/api/crm/record";
  import {listCourse} from "../../../../api/crm/course";
  import {addBusinessTrack} from "../../../../api/crm/businessTrack";
  import {listClueTrack, addClueTrack, transform2Business} from "@/api/crm/clueTrack";

  import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode
  } from 'element-china-area-data'

  import GiveBack from "./give-back";
  import TrackList from "@/views/crm/business/components/track-list";
  import transform from "./transform";

  export default {
    name: "track-index",
    props: {
      businessId: {type: [String, Number],},
      view: {type: Boolean, default: false},
    },
    components: {GiveBack, TrackList, transform},
    dicts: ['sys_user_sex', 'clues_level', 'course_subject', 'clues_item', 'channel_type',
      'occupation', 'education', 'job', 'major', 'sys_user_sex', 'salary', 'clue_status',
      'track_status', 'communication_point', 'reasons_for_reporting',],
    data() {
      return {
        business: {},
        assignRecord: {},
        provinceAndCityDataOptions: provinceAndCityData,
        id: this.businessId,
        disabled: false,
        // 辅助查询跟进记录
        trackListKey: 0,
        // 表单参数
        form: {
          area: [],
          price: null,
          communicationPoints: [],
        },
        // 表单校验
        rules: {
          name: [{required: true, message: '员工不能为空', trigger: 'blue'}],
          phone: [{required: true, message: '手机号不能为空', trigger: 'blue'}],
          courseId: [{required: true, message: '意向学科不能为空', trigger: 'blue'}],
          subject: [{required: true, message: '意向学科不能为空', trigger: 'blue'}],
          trackStatus: [{required: true, message: '跟进状态不能为空', trigger: 'blue'}],
          nextTime: [{required: true, message: '下次跟进时间不能为空', trigger: 'blue'}],
          communicationPoints: {required: true, message: '沟通重点不能为空', trigger: 'blue'},
          area: {required: true, message: '沟通重点不能为空', trigger: 'blue'},
          record: [{required: true, message: '沟通内容不能为空', trigger: 'blue'}],
        },
        courseOptions: [],
        componentKeys: {
          giveBackKey: 0,
          transformKey: 0,
        },
      }
    },
    watch: {
      businessId(newValue, oldValue) {
        this.id = newValue;
        this.getList();
      },
      view: {
        handler: function (newValue, oldValue) {
          this.disabled = newValue;
        },
        immediate: true
      },
    },
    created() {
      this.getList();
      this.getBusiness();
    },
    methods: {
      getList() {
        getBusiness(this.id).then(resp => {
          this.form = resp.data;
          if (this.form.provinces && this.form.city) {
            this.form.area = [TextToCode[this.form.provinces].code, TextToCode[this.form.provinces][this.form.city].code]
          }
        });
        this.trackListKey++;
      },
      // 回调
      ok() {
        this.$emit('track');
        this.getList();
      },
      // 转交成客户
      handleTransForm() {
        this.$refs.transform.dialogVisible = true;
        this.$refs.transform.id = this.businessId;
        this.$refs.transform.resetForm();
      },
      // 踢回公海
      handleGiveBack() {
        this.$refs.giveBack.open = true;
        this.$refs.giveBack.id = this.businessId;
        this.$refs.giveBack.resetForm();
      },
      // 提交表单
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.form.keyItems = this.form.communicationPoints.join(",");
            this.handleChangeArea(this.form.area);
            addBusinessTrack(this.form).then(resp => {
              this.handleSuccess();
            });
          }
        })
      },
      // 操作成功提示 handleSuccess
      handleSuccess() {
        this.$message.success('操作成功！');
        this.getList();
        //  通知父组件
        this.$emit('track');
      },
      // 意向课程
      hangelCoures(cource) {
        this.form.price = cource.price;
      },
      handleChangeSubject(value) {
        this.form.courseId = null;
        this.form.price = null;
        listCourse({subject: value}).then(resp => {
          this.courseOptions = resp.rows;
        })
      },
      // handleTransform() {
      //   this.$refs.transform.resetForm();
      //   this.$refs.transform.dialogVisible = true;
      // },
      //  地区下拉列表
      handleChange(value) {
        console.log(value)
      },
      handleChangeArea(value) {
        this.form.provinces = CodeToText[value[0]]
        this.form.city = CodeToText[value[1]]
      },
      getBusiness() {
        getBusiness(this.businessId).then(resp => {
          this.business = resp.data;
          this.form = resp.data;
          // 根据ID设置意向课程下拉列表
          listCourse({subject: this.form.subject}).then(resp => {
            this.courseOptions = resp.rows;
          })
          // 设置省市下拉列表的值
          if (this.form.provinces && this.form.city) {
            this.form.area = [TextToCode[this.form.provinces].code, TextToCode[this.form.provinces][this.form.city].code]
            this.handleChangeArea(this.form.area);
          }
        })
      },
      getAssignRecord() {
        // 简单调用自动生成的分页代码，取最大id的对象当作最近的分配记录
        listRecord({
          assignId: this.businessId,
          type: 1,
          pageNum: 1,
          pageSize: 5,
          orderByColumn: 'id',
          isAsc: 'desc'
        }).then(resp => {
            if (resp.rows() && resp.rows.length > 0) {
              this.assignRecord = resp.rows.reduce((a1, a2) => {
                return a1.id > a2.id ? a1 : a2
              });
            }
          }
        );
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          phone: null,
          channel: null,
          activityId: null,
          provinces: null,
          city: null,
          sex: null,
          age: null,
          weixin: null,
          qq: null,
          level: null,
          subject: null,
          courseId: null,
          createBy: null,
          createTime: null,
          occupation: null,
          education: null,
          job: null,
          salary: null,
          major: null,
          expectedSalary: null,
          reasons: null,
          plan: null,
          planTime: null,
          otherIntention: null,
          status: null,
          nextTime: null,
          lastUpdateTime: null,
          clueId: null,
          transfer: null,
          remark: null,
          endTime: null,
          price: null,
          communicationPoints: [],
        };
        this.resetForm("form");
      },
    }
  }
</script>

<style scoped>

</style>
